<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection"content="telphone=no"/>
    <script type="text/javascript" src="dist/js/flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="dist/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="dist/css/style.css">
    <title>水果商城——手机版</title>
</head>
<body>
	<header class="banner">
		<span class="icon my"></span>
		<h1 class="tit">水果商城</h1>
		<span class="icon courier"></span>
	</header>
	<div class="detail-swiper swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="#"><img src="dist/images/banner.jpg" alt=""></a>
        </div>
        <div class="swiper-slide">
            <a href="#"><img src="dist/images/banner.jpg" alt=""></a>
        </div>
        <div class="swiper-slide">
            <a href="#"><img src="dist/images/banner.jpg" alt=""></a>
        </div>
        <div class="swiper-slide">
            <a href="#"><img src="dist/images/banner.jpg" alt=""></a>
        </div>
		    </div> <!-- 如果需要分页器 -->
		      <div class="swiper-pagination"></div>

		      <!-- 如果需要导航按钮 -->
		      <!--<div class="swiper-button-prev"></div>
		      <div class="swiper-button-next"></div> -->

		      <!-- 如果需要滚动条 -->
		      <!-- <div class="swiper-scrollbar"></div> -->
		  </div>
  <ul class="classify">
			<li>
				<img src="dist/images/fruit.png" alt="鲜果">
				<span>鲜果</span>
			</li>
			<li>
				<img src="dist/images/juice.png" alt="果汁">
				<span>果汁</span>
			</li>
			<li>
				<img src="dist/images/other.png" alt="其他">
				<span>其他</span>
			</li>
		</ul>
		<div class="discount">
				<p class="discount-num">10元优惠券</p>
		</div>
		<div class="optimization">
			<h2 class="optimization-tit">优选水果</h2>
			<img src="dist/images/optimization.jpg" alt="" class="optimization-img">
			<ul class="optimization-list">
				<li>
					<img src="dist/images/pic_1.jpg" alt="">
					<div>
						<h2 class="fruit-name">菲律宾都乐冠菠萝2只</h2>
						<span class="fruit-num">1份/约500g</span>
						<p class="fruit-price">￥ 9.9 <span class="old-price">￥19.9</span></p>
					</div>
				</li>
				<li>
					<img src="dist/images/pic_2.jpg" alt="">
					<div>
						<h2 class="fruit-name">菲律宾都乐冠菠萝2只</h2>
						<span class="fruit-num">1份/约500g</span>
						<p class="fruit-price">￥ 9.9 <span class="old-price">￥19.9</span></p>
					</div>
				</li>
				<li>
					<img src="dist/images/pic_3.jpg" alt="">
					<div>
						<h2 class="fruit-name">菲律宾都乐冠菠萝2只</h2>
						<span class="fruit-num">1份/约500g</span>
						<p class="fruit-price">￥ 9.9 <span class="old-price">￥19.9</span></p>
					</div>
				</li>
				<li>
					<img src="dist/images/pic_4.jpg" alt="">
					<div>
						<h2 class="fruit-name">菲律宾都乐冠菠萝2只</h2>
						<span class="fruit-num">1份/约500g</span>
						<p class="fruit-price">￥ 9.9 <span class="old-price">￥19.9</span></p>
					</div>
				</li>
				<li>
					<img src="dist/images/pic_5.jpg" alt="">
					<div>
						<h2 class="fruit-name">菲律宾都乐冠菠萝2只</h2>
						<span class="fruit-num">1份/约500g</span>
						<p class="fruit-price">￥ 9.9 <span class="old-price">￥19.9</span></p>
					</div>
				</li>
				<li>
					<img src="dist/images/pic_6.jpg" alt="">
					<div>
						<h2 class="fruit-name">菲律宾都乐冠菠萝2只</h2>
						<span class="fruit-num">1份/约500g</span>
						<p class="fruit-price">￥ 9.9 <span class="old-price">￥19.9</span></p>
					</div>
				</li>
			</ul>
		</div>
		<footer class="footer">
			<ul>
				<li class="on">
					<a href="index.html">
						<i class="icon home"></i>
						<span class="name">首页</span>
					</a>
				</li>
				<li>
					<a href="">
						<i class="icon kuaidi"></i>
						<span class="name">快递</span>
					</a>
				</li>
				<li>
					<a href="dist/mine.html">
						<i class="icon mine"></i>
						<span class="name">我的</span>
					</a>
				</li>
			</ul>
		</footer>
		<div class="pop-con">
			<div class="pop-main">
					<em class="close">x</em>
					<ul class="pop-list">
						<li>
							<h1>苹果<span class="border"></span></h1>
							<div class="third-fl">
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
							</div>
						</li>
						<li>
							<h1>果汁<span class="border"></span></h1>
							<div class="third-fl">
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
							</div>
						</li>
						<li>
							<h1>其他<span class="border"></span></h1>
							<div class="third-fl">
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
								<span>红苹果</span>
							</div>
						</li>
					</ul>
			</div>
		</div>
<script type="text/javascript" charset="utf-8" src="dist/js/zepto.min.js"></script>
<script type="text/javascript" charset="utf-8" src="dist/js/swiper.jquery.min.js"></script>
<script>
    var mySwiper = new Swiper('.detail-swiper', {
        direction: 'horizontal',
        loop: true,
        autoplay: 3000,
        autoplayDisableOnInteraction: false,
        paginationClickable: true,

        // 如果需要分页器
        pagination: '.swiper-pagination'

        // 如果需要前进后退按钮
        // nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',

        // 如果需要滚动条
        // scrollbar: '.swiper-scrollbar',
    })
    //侧边栏收缩展开
    $(".classify").on("click", function(){
    	$(".pop-con").show()
  	  window.scrollTo(0,0)
  	  $(document.body).css("overflow", "hidden")
    })
    $(".close").on("click", function(){
    	$(".pop-con").hide()
  	  $(document.body).css("overflow", "auto")
    })

    $(".third-fl span").on("click", function(){
    	$(this).toggleClass("on")
    })

</script>
</body>
</html>